<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet"
	href="../../../css/Semantic-UI-CSS-master/semantic.min.css" />

<link rel="stylesheet" href="../../../js/layui/css/layui.css"
	media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="../../../js/vue/vue.js"></script>
<script src="../../../js/vue/axios.min.js"></script>
<style>
* {
	margin: 0px;
	padding: 0px;
}

.container {
	border: 1px solid;
	height: 100%;
}

.zth-top-text {
	border-bottom: 2px #009E94 solid;
	line-height: 30px;
	padding-left: 20px;
	font-size: 18px;
	font-family: "楷体";
}

.zth-top-border {
	margin-top: 15px;
	margin-left: 18px;
}

.zth-div-border {
	border: 1px #0066CC dotted;
	border-top: 3px rgb(0, 123, 255) solid;
	border-radius: 5px;
	width: 32%;
	margin-right: 10px;
	float: left;
}

.zth-div-border .zth-div-container {
	margin-top: 15px;
	margin-bottom: 20px;
}

.zth-div-border label {
	margin-left: 18px;
	font-weight: bold;
}

.zth-div-text {
	margin-left: 5px;
	font-size: 16px;
	font-family: '宋体';
	padding: 10px;
	border-bottom: 1px solid #cccccc;
}

.zth-input-css {
	width: 90%;
	height: 28px;
	margin-left: 20px;
	margin-top: 5px;
	border-radius: 5px;
	border: 1px solid #CCCCCC;
	color: #CCCCCC;
}

.zth-div-but input {
	width: 80px;
	height: 30px;
	background: red;
	border-radius: 5px;
	margin-left: 280px;
	margin-top: 10px;
}
</style>
</head>
<body>
	<div id="app" class="container">
		<div class="zth-top-text">系统配置</div>
		<div class="zth-top-border">
			<!-- 左中右 -->
			<div class="zth-div-border">
				<div class="zth-div-text">站点信息</div>
				<div>
					<div class="zth-div-container">
						<label>站点名称</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="websiteName" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>站点描述</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="websiteDescription" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>站点logo</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="websiteLogo" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>favicon.ico</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="websiteIcon" class="zth-input-css">
					</div>
				</div>
			</div>
			<div class="zth-div-border">
				<div class="zth-div-text">个人信息</div>
				<div>
					<div class="zth-div-container">
						<label>个人头像</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="yourAvatar" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>个人名称</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="yourName" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>个人邮箱</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="yourEmail" class="zth-input-css">
					</div>
				</div>
			</div>
			<div class="zth-div-border">
				<div class="zth-div-text">底部设置</div>
				<div>
					<div class="zth-div-container">
						<label>底部About</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="footerAbout" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>底部备案号</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="footerICP" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>底部Copy Right</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="footerCopyRight" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>底部powered By</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="footerPoweredBy" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>底部powered By URL</label> <input type="text"
							AUTOCOMPLETE="OFF" v-model="footerPoweredByURL"
							class="zth-input-css">
					</div>

				</div>
			</div>
			<div style="width: 216px; margin-left: 450px;">
				<button type="button" @click="edit"
					class="layui-btn layui-btn-fluid">修改</button>
			</div>
		</div>
	</div>
	<script src="../../../js/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
	
	layui.use(['jquery', 'layer','upload'], function() {
		upload=layui.upload;
		$ = layui.jquery;

	});
	
				new Vue({
					el:"#app",
					data(){
						return{
							footerAbout:'',//底部About
							footerCopyRight:'',//底部Copy Right
							footerICP:'',//底部备案号
							footerPoweredBy:'',//底部powered By
							footerPoweredByURL:'',//底部powered By URL
							websiteDescription:'',//站点描述
							websiteIcon:'',//favicon.ico
							websiteLogo:'',//站点logo
							websiteName:'',//站点名称
							yourAvatar:'',//个人头像
							yourEmail:'',//个人邮箱
							yourName:''//个人名称
						}
					},
					mounted() {
						this.showconfig();
					},
					methods:{
						showconfig:function(){
							axios.get('/ssb/config/findAll').then(res=>{
								this.footerAbout=res.data[0].config_value;
								this.footerCopyRight=res.data[1].config_value;
								this.footerICP=res.data[2].config_value;
								this.footerPoweredBy=res.data[3].config_value;
								this.footerPoweredByURL=res.data[4].config_value;
								this.websiteDescription=res.data[5].config_value;
								this.websiteIcon=res.data[6].config_value;
								this.websiteLogo=res.data[7].config_value;
								this.websiteName=res.data[8].config_value;
								this.yourAvatar=res.data[9].config_value;
								this.yourEmail=res.data[10].config_value;
								this.yourName=res.data[11].config_value; 
								/* for(var i=0;i<this.arr.length;i++){
									this.arr[i]=res.data[i].config_value;
								}
								console.log(this.arr); */
							},err=>{
								console.log(err);
							});
						},/* 
						editFooter:function(){
							var params = new URLSearchParams();
							params.append('footerAbout',this.footerAbout);
							params.append('footerCopyRight',this.footerCopyRight);
							params.append('footerICP',this.footerICP);
							params.append('footerPoweredBy',this.footerPoweredBy);
							params.append('footerPoweredByURL',this.footerPoweredByURL);
							
							axios.post('/ssb/config/editFooter',params)then.(res=>{
									console.log(res);
							},err=>{
								console.log(err);
							});
						} */
					
					edit:function(){
						var params = new URLSearchParams();
						params.append('footerAbout',this.footerAbout);
						params.append('footerCopyRight',this.footerCopyRight);
						params.append('footerICP',this.footerICP);
						params.append('footerPoweredBy',this.footerPoweredBy);
						params.append('footerPoweredByURL',this.footerPoweredByURL);
						params.append('websiteDescription',this.websiteDescription);
						params.append('websiteIcon',this.websiteIcon);
						params.append('websiteLogo',this.websiteLogo);
						params.append('websiteName',this.websiteName);
						params.append('yourAvatar',this.yourAvatar);
						params.append('yourEmail',this.yourEmail);
						params.append('yourName',this.yourName);
						
						if(
							this.footerAbout==null || this.footerAbout==''||this.footerAbout.match(/^[ ]*$/)||
							this.footerCopyRight==null || this.footerCopyRight==''||this.footerCopyRight.match(/^[ ]*$/)||
							this.footerICP==null || this.footerICP==''||this.footerICP.match(/^[ ]*$/)||
							this.footerPoweredBy==null || this.footerPoweredBy==''||this.footerPoweredBy.match(/^[ ]*$/)||
							this.footerPoweredByURL==null || this.footerPoweredByURL==''||this.footerPoweredByURL.match(/^[ ]*$/)||
							this.websiteDescription==null || this.websiteDescription==''||this.websiteDescription.match(/^[ ]*$/)||
							this.websiteIcon==null || this.websiteIcon==''||this.websiteIcon.match(/^[ ]*$/)||
							this.websiteLogo==null || this.websiteLogo==''||this.websiteLogo.match(/^[ ]*$/)||
							this.websiteName==null || this.websiteName==''||this.websiteName.match(/^[ ]*$/)||
							this.yourAvatar==null || this.yourAvatar==''||this.yourAvatar.match(/^[ ]*$/)||
							this.yourEmail==null || this.yourEmail==''||this.yourEmail.match(/^[ ]*$/)||
							this.yourName==null || this.yourName==''||this.yourName.match(/^[ ]*$/)
						){
							alert("系统配置不允许出现空值");
						}else{
							var index = layer.confirm('配置数据不建议轻易修改，请谨慎操作', {
								btn: ['继续', "取消"], //按钮
								shade: false, //不显示遮罩
								time: 20000, //20s后自动关闭
							}, function() {
							
							axios.post('/ssb/config/editFooter',params).then(res=>{
								if(res.data.row>0){
									layer.alert(res.data.message+"成功！");
									location.href="tb_config.html";
									}
								},err=>{
									console.log(err);
								});
							
							//关闭提示框
							layer.close(index);

						},  function() {
							//关闭提示框
							layer.close(index);
						});
						
					}
					},
					}
				});
			</script>

</body>
</html>
